*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  background: #fff8c2;
}
#content {
  max-width: 960px;
  margin: 0 auto;
}
.box {
  height: 140px;
  width: 140px;
  margin: 10px;
  background: #cec79c;
  position: relative;
  list-style: none;
  display: inline-block;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
  overflow: hidden;
}
.box:before {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: 30px;
  width: 140px;
  line-height: 30px;
  text-align: center;
  color: #333226;
  font-family: sans-serif;
  font-weight: 700;
  font-size: 12px;
}
.box-inner {
  height: 70px;
  width: 70px;
  background: #868692;
  position: absolute;
  display: block;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
  z-index: 0;
}
.fadein .box-inner,
.fadein-grow .box-inner {
  opacity: 0;
}
.rise .box-inner {
  top: 70px;
}
.kaleidoscope-in .box-inner {
  background: none;
  border: 0 dashed #868692;
}
.kaleidoscope-out .box-inner {
  background: none;
  border: 70px dashed #868692;
}
.radar .box-inner {
  background: none;
  border: 0 double #868692;
  height: 280px;
  width: 280px;
  top: -70px;
  left: -70px;
  -webkit-border-radius: 140px;
  -moz-border-radius: 140px;
  border-radius: 140px;
}
.slidein .box-inner,
.marquee .box-inner {
  left: 100%;
}
.diamond-run .box-inner,
.cross-run .box-inner {
  left: 35px;
}
.shrink .box-inner,
.fadeout-shrink .box-inner,
.slidein .box-inner,
.slideout .box-inner,
.marquee .box-inner,
.fadein .box-inner,
.fadeout .box-inner,
.kaleidoscope-in .box-inner,
.kaleidoscope-out .box-inner,
.blink .box-inner,
.colorfade .box-inner,
.rainbow .box-inner,
.flicker .box-inner {
  height: 140px;
  width: 140px;
}
.box.slideout:hover .box-inner {
  -webkit-animation: slideout 500ms linear 1;
  -moz-animation: slideout 500ms linear 1;
  animation: slideout 500ms linear 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.box.slideout:before {
  content: 'slideout';
}
.box.slidein:hover .box-inner {
  -webkit-animation: slidein 500ms linear 1;
  -moz-animation: slidein 500ms linear 1;
  animation: slidein 500ms linear 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.box.slidein:before {
  content: 'slidein';
}
.box.marquee:hover .box-inner {
  -webkit-animation: marquee 1000ms linear infinite;
  -moz-animation: marquee 1000ms linear infinite;
  animation: marquee 1000ms linear infinite;
  -webkit-animation-fill-mode: none;
  -moz-animation-fill-mode: none;
  animation-fill-mode: none;
}
.box.marquee:before {
  content: 'marquee';
}
.box.fadeout:hover .box-inner {
  -webkit-animation: fadeout 500ms linear 1;
  -moz-animation: fadeout 500ms linear 1;
  animation: fadeout 500ms linear 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.box.fadeout:before {
  content: 'fadeout';
}
.box.fadein:hover .box-inner {
  -webkit-animation: fadein 500ms linear 1;
  -moz-animation: fadein 500ms linear 1;
  animation: fadein 500ms linear 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.box.fadein:before {
  content: 'fadein';
}
.box.colorfade:hover .box-inner {
  -webkit-animation: colorfade 500ms linear 1;
  -moz-animation: colorfade 500ms linear 1;
  animation: colorfade 500ms linear 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.box.colorfade:before {
  content: 'colorfade';
}
.box.rainbow:hover .box-inner {
  -webkit-animation: rainbow 3000ms linear infinite;
  -moz-animation: rainbow 3000ms linear infinite;
  animation: rainbow 3000ms linear infinite;
  -webkit-animation-fill-mode: none;
  -moz-animation-fill-mode: none;
  animation-fill-mode: none;
}
.box.rainbow:before {
  content: 'rainbow';
}
.box.blink:hover .box-inner {
  -webkit-animation: blink 500ms linear infinite;
  -moz-animation: blink 500ms linear infinite;
  animation: blink 500ms linear infinite;
  -webkit-animation-fill-mode: none;
  -moz-animation-fill-mode: none;
  animation-fill-mode: none;
}
.box.blink:before {
  content: 'blink';
}
.box.flicker:hover .box-inner {
  -webkit-animation: flicker 500ms linear infinite;
  -moz-animation: flicker 500ms linear infinite;
  animation: flicker 500ms linear infinite;
  -webkit-animation-fill-mode: none;
  -moz-animation-fill-mode: none;
  animation-fill-mode: none;
}
.box.flicker:before {
  content: 'flicker';
}
.box.grow:hover .box-inner {
  -webkit-animation: grow 500ms linear 1;
  -moz-animation: grow 500ms linear 1;
  animation: grow 500ms linear 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.box.grow:before {
  content: 'grow';
}
.box.shrink:hover .box-inner {
  -webkit-animation: shrink 500ms linear 1;
  -moz-animation: shrink 500ms linear 1;
  animation: shrink 500ms linear 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.box.shrink:before {
  content: 'shrink';
}
.box.fadein-grow:hover .box-inner {
  -webkit-animation: fadein-grow 500ms linear 1;
  -moz-animation: fadein-grow 500ms linear 1;
  animation: fadein-grow 500ms linear 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.box.fadein-grow:before {
  content: 'fadein-grow';
}
.box.fadeout-shrink:hover .box-inner {
  -webkit-animation: fadeout-shrink 500ms linear 1;
  -moz-animation: fadeout-shrink 500ms linear 1;
  animation: fadeout-shrink 500ms linear 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.box.fadeout-shrink:before {
  content: 'fadeout-shrink';
}
.box.bounce-y:hover .box-inner {
  -webkit-animation: bounce-y 1000ms linear infinite;
  -moz-animation: bounce-y 1000ms linear infinite;
  animation: bounce-y 1000ms linear infinite;
  -webkit-animation-fill-mode: none;
  -moz-animation-fill-mode: none;
  animation-fill-mode: none;
}
.box.bounce-y:before {
  content: 'bounce-y';
}
.box.bounce-x:hover .box-inner {
  -webkit-animation: bounce-x 1000ms linear infinite;
  -moz-animation: bounce-x 1000ms linear infinite;
  animation: bounce-x 1000ms linear infinite;
  -webkit-animation-fill-mode: none;
  -moz-animation-fill-mode: none;
  animation-fill-mode: none;
}
.box.bounce-x:before {
  content: 'bounce-x';
}
.box.bounce-xy:hover .box-inner {
  -webkit-animation: bounce-xy 1000ms linear infinite;
  -moz-animation: bounce-xy 1000ms linear infinite;
  animation: bounce-xy 1000ms linear infinite;
  -webkit-animation-fill-mode: none;
  -moz-animation-fill-mode: none;
  animation-fill-mode: none;
}
.box.bounce-xy:before {
  content: 'bounce-xy';
}
.box.drop:hover .box-inner {
  -webkit-animation: drop 500ms linear 1;
  -moz-animation: drop 500ms linear 1;
  animation: drop 500ms linear 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.box.drop:before {
  content: 'drop';
}
.box.rise:hover .box-inner {
  -webkit-animation: rise 500ms linear 1;
  -moz-animation: rise 500ms linear 1;
  animation: rise 500ms linear 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.box.rise:before {
  content: 'rise';
}
.box.kaleidoscope-in:hover .box-inner {
  -webkit-animation: kaleidoscope-in 500ms linear 1;
  -moz-animation: kaleidoscope-in 500ms linear 1;
  animation: kaleidoscope-in 500ms linear 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.box.kaleidoscope-in:before {
  content: 'kaleidoscope-in';
}
.box.kaleidoscope-out:hover .box-inner {
  -webkit-animation: kaleidoscope-out 500ms linear 1;
  -moz-animation: kaleidoscope-out 500ms linear 1;
  animation: kaleidoscope-out 500ms linear 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.box.kaleidoscope-out:before {
  content: 'kaleidoscope-out';
}
.box.radar:hover .box-inner {
  -webkit-animation: radar 1000ms linear infinite;
  -moz-animation: radar 1000ms linear infinite;
  animation: radar 1000ms linear infinite;
  -webkit-animation-fill-mode: none;
  -moz-animation-fill-mode: none;
  animation-fill-mode: none;
}
.box.radar:before {
  content: 'radar';
}
.box.run:hover .box-inner {
  -webkit-animation: run 2000ms linear infinite;
  -moz-animation: run 2000ms linear infinite;
  animation: run 2000ms linear infinite;
  -webkit-animation-fill-mode: none;
  -moz-animation-fill-mode: none;
  animation-fill-mode: none;
}
.box.run:before {
  content: 'run';
}
.box.cross-run:hover .box-inner {
  -webkit-animation: cross-run 4000ms linear infinite;
  -moz-animation: cross-run 4000ms linear infinite;
  animation: cross-run 4000ms linear infinite;
  -webkit-animation-fill-mode: none;
  -moz-animation-fill-mode: none;
  animation-fill-mode: none;
}
.box.cross-run:before {
  content: 'cross-run';
}
.box.diamond-run:hover .box-inner {
  -webkit-animation: diamond-run 2000ms linear infinite;
  -moz-animation: diamond-run 2000ms linear infinite;
  animation: diamond-run 2000ms linear infinite;
  -webkit-animation-fill-mode: none;
  -moz-animation-fill-mode: none;
  animation-fill-mode: none;
}
.box.diamond-run:before {
  content: 'diamond-run';
}
/* {
   : */
@-webkit-keyframes slideout {
    0%{left:0}100%{left:100%}
}
/*;
}
/**/
/* {
   : */
@-moz-keyframes slideout {
    0%{left:0}100%{left:100%}
}
/*;
}
/**/
/* {
   : */
@keyframes slideout {
    0%{left:0}100%{left:100%}
}
/*;
}
/**/
/* {
   : */
@-webkit-keyframes slidein {
    0%{left:100%}100%{left:0}
}
/*;
}
/**/
/* {
   : */
@-moz-keyframes slidein {
    0%{left:100%}100%{left:0}
}
/*;
}
/**/
/* {
   : */
@keyframes slidein {
    0%{left:100%}100%{left:0}
}
/*;
}
/**/
/* {
   : */
@-webkit-keyframes marquee {
    0%{left:100%}100%{left:-100%}
}
/*;
}
/**/
/* {
   : */
@-moz-keyframes marquee {
    0%{left:100%}100%{left:-100%}
}
/*;
}
/**/
/* {
   : */
@keyframes marquee {
    0%{left:100%}100%{left:-100%}
}
/*;
}
/**/
/* {
   : */
@-webkit-keyframes fadeout {
    0%{opacity:1}100%{opacity:0}
}
/*;
}
/**/
/* {
   : */
@-moz-keyframes fadeout {
    0%{opacity:1}100%{opacity:0}
}
/*;
}
/**/
/* {
   : */
@keyframes fadeout {
    0%{opacity:1}100%{opacity:0}
}
/*;
}
/**/
/* {
   : */
@-webkit-keyframes fadein {
    0%{opacity:0}100%{opacity:1}
}
/*;
}
/**/
/* {
   : */
@-moz-keyframes fadein {
    0%{opacity:0}100%{opacity:1}
}
/*;
}
/**/
/* {
   : */
@keyframes fadein {
    0%{opacity:0}100%{opacity:1}
}
/*;
}
/**/
/* {
   : */
@-webkit-keyframes colorfade {
    0%{background-color:#605d48}100%{background-color:#92646c}
}
/*;
}
/**/
/* {
   : */
@-moz-keyframes colorfade {
    0%{background-color:#605d48}100%{background-color:#92646c}
}
/*;
}
/**/
/* {
   : */
@keyframes colorfade {
    0%{background-color:#605d48}100%{background-color:#92646c}
}
/*;
}
/**/
/* {
   : */
@-webkit-keyframes rainbow {
    0%,100%{background:#868692}16.66%{background:#6f927f}33.33%{background:#928974}49.99%{background:#927169}66.66%{background:#92646c}73.33%{background:#926d8e}
}
/*;
}
/**/
/* {
   : */
@-moz-keyframes rainbow {
    0%,100%{background:#868692}16.66%{background:#6f927f}33.33%{background:#928974}49.99%{background:#927169}66.66%{background:#92646c}73.33%{background:#926d8e}
}
/*;
}
/**/
/* {
   : */
@keyframes rainbow {
    0%,100%{background:#868692}16.66%{background:#6f927f}33.33%{background:#928974}49.99%{background:#927169}66.66%{background:#92646c}73.33%{background:#926d8e}
}
/*;
}
/**/
/* {
   : */
@-webkit-keyframes blink {
    0%,50%,100%{opacity:0}50.01%,99.99%{opacity:1}
}
/*;
}
/**/
/* {
   : */
@-moz-keyframes blink {
    0%,50%,100%{opacity:0}50.01%,99.99%{opacity:1}
}
/*;
}
/**/
/* {
   : */
@keyframes blink {
    0%,50%,100%{opacity:0}50.01%,99.99%{opacity:1}
}
/*;
}
/**/
/* {
   : */
@-webkit-keyframes flicker {
    0%,5%,20%,25%,100%{opacity:0}5.01%,19.99%,25.01%,99.99%{opacity:1}
}
/*;
}
/**/
/* {
   : */
@-moz-keyframes flicker {
    0%,5%,20%,25%,100%{opacity:0}5.01%,19.99%,25.01%,99.99%{opacity:1}
}
/*;
}
/**/
/* {
   : */
@keyframes flicker {
    0%,5%,20%,25%,100%{opacity:0}5.01%,19.99%,25.01%,99.99%{opacity:1}
}
/*;
}
/**/
/* {
   : */
@-webkit-keyframes grow {
    0%{height:70px;width:70px}100%{height:140px;width:140px}
}
/*;
}
/**/
/* {
   : */
@-moz-keyframes grow {
    0%{height:70px;width:70px}100%{height:140px;width:140px}
}
/*;
}
/**/
/* {
   : */
@keyframes grow {
    0%{height:70px;width:70px}100%{height:140px;width:140px}
}
/*;
}
/**/
/* {
   : */
@-webkit-keyframes shrink {
    0%{height:140px;width:140px}100%{height:70px;width:70px}
}
/*;
}
/**/
/* {
   : */
@-moz-keyframes shrink {
    0%{height:140px;width:140px}100%{height:70px;width:70px}
}
/*;
}
/**/
/* {
   : */
@keyframes shrink {
    0%{height:140px;width:140px}100%{height:70px;width:70px}
}
/*;
}
/**/
/* {
   : */
@-webkit-keyframes fadein-grow {
    0%{opacity:0;height:70px;width:70px}100%{opacity:1;height:140px;width:140px}
}
/*;
}
/**/
/* {
   : */
@-moz-keyframes fadein-grow {
    0%{opacity:0;height:70px;width:70px}100%{opacity:1;height:140px;width:140px}
}
/*;
}
/**/
/* {
   : */
@keyframes fadein-grow {
    0%{opacity:0;height:70px;width:70px}100%{opacity:1;height:140px;width:140px}
}
/*;
}
/**/
/* {
   : */
@-webkit-keyframes fadeout-shrink {
    0%{opacity:1;height:140px;width:140px}100%{opacity:0;height:70px;width:70px}
}
/*;
}
/**/
/* {
   : */
@-moz-keyframes fadeout-shrink {
    0%{opacity:1;height:140px;width:140px}100%{opacity:0;height:70px;width:70px}
}
/*;
}
/**/
/* {
   : */
@keyframes fadeout-shrink {
    0%{opacity:1;height:140px;width:140px}100%{opacity:0;height:70px;width:70px}
}
/*;
}
/**/
/* {
   : */
@-webkit-keyframes bounce-y {
    0%,100%{top:0;}50%{top:70px}
}
/*;
}
/**/
/* {
   : */
@-moz-keyframes bounce-y {
    0%,100%{top:0;}50%{top:70px}
}
/*;
}
/**/
/* {
   : */
@keyframes bounce-y {
    0%,100%{top:0;}50%{top:70px}
}
/*;
}
/**/
/* {
   : */
@-webkit-keyframes bounce-x {
    0%,100%{left:0;}50%{left:70px}
}
/*;
}
/**/
/* {
   : */
@-moz-keyframes bounce-x {
    0%,100%{left:0;}50%{left:70px}
}
/*;
}
/**/
/* {
   : */
@keyframes bounce-x {
    0%,100%{left:0;}50%{left:70px}
}
/*;
}
/**/
/* {
   : */
@-webkit-keyframes bounce-xy {
    0%,100%{top:0;left:0;}50%{top:70px;left:70px}
}
/*;
}
/**/
/* {
   : */
@-moz-keyframes bounce-xy {
    0%,100%{top:0;left:0;}50%{top:70px;left:70px}
}
/*;
}
/**/
/* {
   : */
@keyframes bounce-xy {
    0%,100%{top:0;left:0;}50%{top:70px;left:70px}
}
/*;
}
/**/
/* {
   : */
@-webkit-keyframes drop {
    0%{top:0;}100%{top:70px}
}
/*;
}
/**/
/* {
   : */
@-moz-keyframes drop {
    0%{top:0;}100%{top:70px}
}
/*;
}
/**/
/* {
   : */
@keyframes drop {
    0%{top:0;}100%{top:70px}
}
/*;
}
/**/
/* {
   : */
@-webkit-keyframes rise {
    0%{top:70px}100%{top:0;}
}
/*;
}
/**/
/* {
   : */
@-moz-keyframes rise {
    0%{top:70px}100%{top:0;}
}
/*;
}
/**/
/* {
   : */
@keyframes rise {
    0%{top:70px}100%{top:0;}
}
/*;
}
/**/
/* {
   : */
@-webkit-keyframes kaleidoscope-in {
    0%{border-width:0}100%{border-width:70px}
}
/*;
}
/**/
/* {
   : */
@-moz-keyframes kaleidoscope-in {
    0%{border-width:0}100%{border-width:70px}
}
/*;
}
/**/
/* {
   : */
@keyframes kaleidoscope-in {
    0%{border-width:0}100%{border-width:70px}
}
/*;
}
/**/
/* {
   : */
@-webkit-keyframes kaleidoscope-out {
    0%{border-width:70px}100%{border-width:0}
}
/*;
}
/**/
/* {
   : */
@-moz-keyframes kaleidoscope-out {
    0%{border-width:70px}100%{border-width:0}
}
/*;
}
/**/
/* {
   : */
@keyframes kaleidoscope-out {
    0%{border-width:70px}100%{border-width:0}
}
/*;
}
/**/
/* {
   : */
@-webkit-keyframes radar {
    0%,100%{border-width:0}50%{border-width:140px}
}
/*;
}
/**/
/* {
   : */
@-moz-keyframes radar {
    0%,100%{border-width:0}50%{border-width:140px}
}
/*;
}
/**/
/* {
   : */
@keyframes radar {
    0%,100%{border-width:0}50%{border-width:140px}
}
/*;
}
/**/
/* {
   : */
@-webkit-keyframes run {
    0%,100%{top:0;left:0;}25%{top:0;left:70px;}50%{top:70px;left:70px;}75%{top:70px;left:0;}
}
/*;
}
/**/
/* {
   : */
@-moz-keyframes run {
    0%,100%{top:0;left:0;}25%{top:0;left:70px;}50%{top:70px;left:70px;}75%{top:70px;left:0;}
}
/*;
}
/**/
/* {
   : */
@keyframes run {
    0%,100%{top:0;left:0;}25%{top:0;left:70px;}50%{top:70px;left:70px;}75%{top:70px;left:0;}
}
/*;
}
/**/
/* {
   : */
@-webkit-keyframes cross-run {
    0%,100%{top:0;left:35px;}12.5%,37.5%,62.5%,87.5%{top:35px;left:35px;}25%{top:35px;left:70px;}50%{top:70px;left:35px;}75%{top:35px;left:0;}
}
/*;
}
/**/
/* {
   : */
@-moz-keyframes cross-run {
    0%,100%{top:0;left:35px;}12.5%,37.5%,62.5%,87.5%{top:35px;left:35px;}25%{top:35px;left:70px;}50%{top:70px;left:35px;}75%{top:35px;left:0;}
}
/*;
}
/**/
/* {
   : */
@keyframes cross-run {
    0%,100%{top:0;left:35px;}12.5%,37.5%,62.5%,87.5%{top:35px;left:35px;}25%{top:35px;left:70px;}50%{top:70px;left:35px;}75%{top:35px;left:0;}
}
/*;
}
/**/
/* {
   : */
@-webkit-keyframes diamond-run {
    0%,100%{top:0;left:35px;}25%{top:35px;left:70px;}50%{top:70px;left:35px;}75%{top:35px;left:0;}
}
/*;
}
/**/
/* {
   : */
@-moz-keyframes diamond-run {
    0%,100%{top:0;left:35px;}25%{top:35px;left:70px;}50%{top:70px;left:35px;}75%{top:35px;left:0;}
}
/*;
}
/**/
/* {
   : */
@keyframes diamond-run {
    0%,100%{top:0;left:35px;}25%{top:35px;left:70px;}50%{top:70px;left:35px;}75%{top:35px;left:0;}
}
/*;
}
/**/
